<template>
  <div class="self-info-wrapper">
    <div class="self-info">
      <div class="sel-info-title">
        <div class="self-nav">
          <div class="icon-back icon" @click="back"></div>
          <div class="title-change-pwd">
            <div class="pwd" @click="loginOut">退出登录</div>
          </div>
        </div>
        <div class="title-account">
          <div class="account-image" @click="alterHead">
            <img :src="selfInfo.u_avater" alt="">
          </div>
          <div class="account-nickname">{{reqComplete?selfInfo.u_nickname:'默认昵称'}}</div>
          <div class="account-editSelf" @click="setSelfInfo">编辑个人资料</div>
        </div>
      </div>
      <div class="statics label">
         阅读统计
         <span @click="goToStatics">查看阅读统计</span>
      </div>
      <Scroll :top="190" :bottom="20">
        <div class="self-info-content">
          <div class="label">
            {{!showAll? '最近阅读':'所有记录'}}
            <span @click="showAllHistory">···</span>
          </div>
          <!-- scroll -->
          <div class="history-list">
            <div class="history-item-wrapper">
              <div class="history-item clear" v-for="(item, index) in latesRecord" :key="index" @click="showBookDetail(item)">
                <!-- 图书封面 -->
                <div class="history-item-cover">
                  <img class="history-item-cover-img" :src="item.cover" alt="" />
                </div>
                <!-- 图书阅读信息 -->
                <div class="history-item-desc">
                  <!-- <div class="item-title">Entrepreneurial Cognition</div> -->
                  <div class="item-title">{{item.title}}</div>
                  <div>{{item.author}}</div>
                  <div class="update-time">上次阅读时间：{{item.update_time}}</div>
                  <div class="continue-read">{{item.l_read_percent=== 100? '重新阅读': '继续阅读'}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import Scroll from '../../components/common/Scroll'
  import { getSelfInfo, getReadLogList } from '../../api/store'
  import { clearLocalStorage } from '../../utils/localStorage'
  export default {
    mixins: [storeShelfMixin],
    components: {
      Scroll
    },
    data () {
      return {
        reqComplete: false,
        historyList: [],
        selfInfo: {},
        showAll: false
      }
    },
    computed: {
      latesRecord: function () {
        if (!this.showAll) {
          return this.historyList.slice(0, 3)
        } else {
          return this.historyList
        }
      }
    },
    methods: {
      // 到统计页面
      goToStatics() {
        console.log('goToStatics()')
        this.$router.push('/Statics')
      },
      // 退出登录
      loginOut() {
        // 清楚浏览器中的身份信息
        // 跳转登录页面
        console.log('loginOut()')
        clearLocalStorage()
        this.$router.push('/login')
      },
      // 修改头像
      showAllHistory() {
        this.showAll = !this.showAll
        console.log('showAll', this.showAll)
      },
      alterHead () {},
      back () {
        console.log('back')
        // 返回到上一级，获取到一个路由
        this.$router.go(-1)
      },
      setSelfInfo() {
        console.log('设置账号')
        this.$router.push({
          path: '/AlterSelfInfo'
        })
      }
    },
    created() {
      // 请求个人信息
      getSelfInfo().then(res => {
        Object.assign(this.selfInfo, res.result)
        return getReadLogList()
      }).then(readLodListRes => {
        console.log('readLodListRes', readLodListRes)
        this.historyList = readLodListRes.list
        // console.log('this.historyList', this.historyList)
        this.laletesRecord = readLodListRes.list.slice(0, 3)
        this.reqComplete = true
      })
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .clear::before,
  .clear::after {
    content: '';
    display: table;
  }
  .clear::after {
    clear: both;
  }
  .self-info-wrapper {
    .self-info {
      width: 100vw;
      height: 100vh;
      background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
      // background: white;
      .sel-info-title {
        border-bottom: 10px solid #fff;
        position: relative;
        width: 100%;
        height: 180px;
        opacity: 0.6;
        background-size:contain;
        .self-nav {
          border-bottom: 1px solid white;
        }
        .icon {
          padding: 5px;
        }
        .title-change-pwd {
          position: absolute;
          right: 0;
          top: 0;
          // border: px2rem(5) solid rgb(8, 8, 8);
          padding: px2rem(3);
          box-sizing: border-box;
          // border-radius: px2rem(20);
          margin: px2rem(10);
        }
        .title-account {
          // @include absCenter;
          // display: flex;
          // justify-content: center;
          text-align: center;
          .account-image {
            // position: absolute;
            // top: 58px;
            // left: 155px;
            height: px2rem(150);// 64
            width: 100%;// 64
            display: flex;
            justify-content: center;
            overflow: hidden;
            margin: px2rem(40) 0;
            img {
              border-radius: 50%;
              width:  px2rem(150);
              height: auto;
            }
          }
          .account-nickname,.account-editSelf {
            padding: px2rem(10);
            box-sizing: border-box;
            text-align: center;
          }
          .account-editSelf {
            font-size: px2rem(24);
            &:hover {
              color: white;
            }
          }
        }
      }
      .label {
          font-size: px2rem(40);//18
          padding: 20px 0;
          box-sizing: border-box;
          color: #333;
          font-weight: bold;
          span {
            float: right;
            font-size: px2rem(30);
            // font-size: px2rem(40);//18
            color: white;
            margin-right: 10px;
          }
        }
      .self-info-content {
        width: 100%;
        margin-top: 10px;
        // background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
        .history-list {
            padding: 0 px2rem(20);//10
            box-sizing: border-box;
            .history-item-wrapper {
              width: 100%;
              .history-item {
                &:last-child {
                  border-bottom: none;
                }
                // width: 50%;
                // display: flex;
                padding: px2rem(10) 0;
                border-bottom: 1px solid white;
                .history-item-cover {
                  width: px2rem(150);
                  background: red;
                  float: left;
                  margin-right: px2rem(20);
                  .history-item-cover-img {
                    width: 100%;
                    vertical-align: middle;
                  }
                  .history-item-desc {
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    .update-time {
                      color: #999;
                    }
                    .continue-read {
                      color: red;
                      position: absolute;
                      right: 15px;
                      bottom: 0;
                    }
                  }
                }
              }
            }
          }
        .content-history-record {
          margin-top: 20px;
          height: 400px;
        }
      }
    }
  }
</style>
